<!-- 分组操作菜单组件 -->
<template>
  <u-popup
    :show="show"
    mode="bottom"
    :z-index="1000"
    @close="onClose"
    :safe-area-inset-bottom="true"
    height="auto"
    border-radius="16"
    :overlay="false"
  >
    <view class="group-actions-container">
      <view class="group-info">
        <text class="group-name">{{ group.name || '分组' }}</text>
      </view>
      
      <view class="action-list">
        <view class="action-item" @click="onEdit">
          <u-icon name="edit-pen" size="22" color="#2979ff"></u-icon>
          <text class="action-text">编辑分组</text>
        </view>
        
        <view class="action-item delete-action" @click="onDelete">
          <u-icon name="trash" size="22" color="#fa3534"></u-icon>
          <text class="action-text delete-text">删除分组</text>
        </view>
      </view>
      
      <view class="cancel-button" @click="onClose">
        <text class="cancel-text">取消</text>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'GroupActions',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    group: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 关闭菜单
    onClose() {
      this.$emit('close');
    },
    
    // 编辑分组
    onEdit() {
      this.$emit('edit', this.group);
      this.onClose();
    },
    
    // 删除分组
    onDelete() {
      if (this.group && this.group.id) {
        this.$emit('delete', this.group.id);
      }
      this.onClose();
    }
  }
}
</script>

<style lang="scss" scoped>
.group-actions-container {
  background-color: var(--background-color);
  padding: 20px;
}

.group-info {
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

.group-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.action-list {
  margin-bottom: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.action-text {
  font-size: 16px;
  color: var(--text-color);
  margin-left: 12px;
}

.delete-action {
  border-bottom: none;
}

.delete-text {
  color: #fa3534;
}

.cancel-button {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  border-radius: 25px;
  margin-top: 10px;
}

.cancel-text {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
</style> 